<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    /**
     * 箭头函数与普通函数的区别:
     *   1.箭头函数没有自己的this,它的this由外层作用域决定，外层作用域的this指向谁，他的this就指向谁
     *   2.箭头函数没有arguments对象
     *   3.不能作为构造函数
     *   4.没有prototype属性
     *   5.不支持bind/call/apply方法
     *
    */
   function hhh() {
    console.log('arguments',arguments)//
   }
   console.log('hhh.prototype', hhh.prototype) // {}
   hhh()

   const fn = ()=> {
    console.log('this', this) // fn的外层作用域是window
    // 报错
    // console.log('arguments',arguments) // ncaught ReferenceError: arguments is not defined
   }
   console.log('fn.prototype',fn.prototype) // undefined
   fn()
   fn.call({name: '最帅的人'}) // this依旧指向window
   fn.bind({name: '最帅的人'})() // this依旧指向window
   const obj = {
    name: '孙悟空',
    age: 18,
    sayHello: ()=> {
      console.log('sayHello方法的this', this)
    },
    rap() {
      console.log('rap方法的this', this)
    },
    child: {
      name: '小空空',
      playBasketBall: ()=> {
        console.log('playBasketBall的this', this)
      }
    }
   }
   obj.sayHello() // window
   obj.rap() // obj
   obj.child.playBasketBall()// window 对象没有作用域


   /**
    * 箭头函数的   this   是由定义时的外层非箭头函数的作用域决定的。
    * 如果外层函数也是箭头函数，那么会继续向上查找，直到找到一个非箭头函数或全局作用域。
    * 所以fn2和fn3的this才会都指向window, 因为他们都是箭头函数
    *
    * 将fn1该为普通函数，fn1的this指向window, fn2的this由外层作用域fn1决定，所以也指向了window,
    * 同理，fn3也是window
   */
   function fn1() {
    console.log('fn1的this', this) // window
    const fn2 = ()=> {
      console.log('fn2 的this', this) // window
      const fn3 = ()=> {
        console.log('fn3 的this', this) // window
      }
      fn3()
    }
    fn2()
   }
   fn1();


   const obj2 = {
    name: '姚思远',
    fn1(){
    console.log('fn1的this', this) // obj2
    const fn2 = ()=> {
      console.log('fn2 的this', this) // obj2
      const fn3 = ()=> {
        console.log('fn3 的this', this) // obj2
      }
      fn3()
    }
    fn2()
   }
  }
   obj2.fn1()
  </script>
</body>
</html>